<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师端页面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .container{
            width: 1300px;
            height: 600px;
            margin: 20px auto;
            position: relative;
        }

        .header_hea{
            width: 100%;
            line-height: 50px;
            font-size: 21px;
            padding-left: 30px;
            color: forestgreen;
        }

        .header_hea a{
            text-decoration: none;
            color: orangered;
            position: relative;
        }

        /*    做一个伪类边框*/
        .header_hea:before{
            content: '';
            height: 44px;
            left: 0;
            right: 0;
            border: 3px dashed dodgerblue;
            position: absolute;
        }

        /*    中部*/
        .main_mat{
            width: 100%;
            height: 550px;
        }

        .mat_left{
            width: 20%;
            height: 550px;
            float: left;
            text-align: center;
        }

        .mat_left a{
            text-decoration: none;
            color: dodgerblue;
            font-size: 21px;
            line-height: 70px;
            position: relative;
            display: block;
        }

        .mat_left:before{
            content: '';
            height: 550px;
            left: 0;
            right: 80%;
            border-left: 3px dashed dodgerblue;
            border-right: 3px dashed dodgerblue;
            border-bottom: 3px dashed dodgerblue;
            position: absolute;
        }

        .mat_right{
            width: 80%;
            height: 550px;
            float: right;
        }

        .mat_right:before{
            content: '';
            height: 550px;
            left: 20%;
            right: 0;
            border-right: 3px dashed dodgerblue;
            border-bottom: 3px dashed dodgerblue;
            position: absolute;
        }

        .mat_list{
            width: 80%;
            overflow: hidden;
            margin: 20px auto;
            position: relative;
        }
        .mat_list label{
            width: 26.666%;
            display: inline-block;
            line-height: 45px;
            font-size: 18px;

        }

    /*    分页*/
        .ol_li{
            width: 82%;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }
        .ol_li li{
            width: 40px;
            height: 35px;
            text-align: center;
            border: 1px rebeccapurple solid;
            border-radius: 20%;
            list-style: none;
            cursor: pointer;
            margin: 0 10px;
            float: left;
        }
        .ol_li a{
            text-decoration: none;
            display: inline-block;
            width: 40px;
            line-height: 35px;
        }

    /*    背景颜色样式*/
        .default{
            background-color: aquamarine;
            color: white;
            border-radius: 20%;
        }
    </style>
</head>
<body>
<!--大区域-->
<div class="container">
    <!--    头部区域-->
    <div class="header_hea">
        欢迎学号/工号：<%= uid %>用户，使用学生管理系统发，当前您的职务是：<%= pname%>&nbsp;【<a href="/logout">退出登录</a>】
    </div>

    <!--    中部区域-->
    <div class="main_mat">
        <div class="mat_left">
            <a href="">查询学生登录日志</a>
            <a href="/sel_scores">查询专业学生成绩</a>
            <a href="/add_scores">录入专业学生成绩</a>
            <a href="/sel_list">查询专业学生信息</a>
            <a href="/add_list">录入专业学生信息</a>
        </div>
        <!--        右边显示区域-->
        <div class="mat_right">
            <!--            显示-->
            <table border="1" cellpadding="0" cellspacing="0" style="width: 80%;margin: 30px auto;border: 1px aqua solid">
                <tr align="cener" >
                    <th style="padding: 8px 0;">序号</th>
                    <th style="padding: 8px 0;">登录ID</th>
                    <th style="padding: 8px 0;">登录者</th>
                    <th style="padding: 8px 0;">登录时间</th>
                </tr>
                <% result.forEach( (item)=>{ %>
                    <tr align="center">
                        <td style="padding: 5px 0;"><%= item.id %></td>
                        <td style="padding: 5px 0;"><%= item.log_uid %></td>
                        <td style="padding: 5px 0;"><%= item.stu_name %></td>
                        <td style="padding: 5px 0;"><%= moment( item.logintmp ).format( 'Y-MM-DD hh:mm:ss' ) %></td>
                    </tr>
                <% } ) %>
            </table>
<!--            分页-->
            <ol class="ol_li">
                <li>
                    <a href="/home_teach?params=<%= 1 %>">首页</a>
                </li>
<!--                循环条数 注意 条数不是数组所以不能使用foreach循环-->
                <% for(var i = 1; i <= params; i++){ %>
                <li>
<!--                    将需要添加的下表用params传参传递-->
                    <a href="/home_teach?params=<%= i %>" class="<%= (pos == i) ? 'default' : '' %>">
                        <%= i %>
                    </a>
                </li>
                <% }  %>
                <li>
                    <a href="/home_teach?params=<%= params %>">尾页</a>
                </li>
            </ol>
        </div>
    </div>
</div>
</body>
</html>
